<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>空投检查插件设计</title>
    <style>
        /* 主题色变量 */
        :root {
            /* 主题基础变量 */
            --theme-primary: #1E88E5;
            --theme-success: #43A047;
            --theme-error: #C62828;
            --theme-warning: #FFA000;
            --theme-background: #FFFFFF;
            --theme-text: #212121;
            --theme-secondaryText: #757575;
            --theme-border: #E0E0E0;
            
            /* 颜色变体 */
            --theme-primary-light: #E3F2FD;
            --theme-primary-dark: #1565C0;
            --theme-success-light: #E8F5E9;
            --theme-success-dark: #2E7D32;
            --theme-error-light: #FFEBEE;
            --theme-error-dark: #B71C1C;
            --theme-warning-light: #FFF8E1;
            --theme-warning-dark: #FF8F00;
        }

        /* 暗色主题变量 */
        .theme-dark {
            --theme-background: #121212;
            --theme-text: #FFFFFF;
            --theme-secondaryText: #B0B0B0;
            --theme-border: #333333;
            --theme-primary-light: rgba(30, 136, 229, 0.2);
            --theme-success-light: rgba(46, 125, 50, 0.2);
            --theme-error-light: rgba(198, 40, 40, 0.2);
            --theme-warning-light: rgba(255, 160, 0, 0.2);
        }

        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        /* 等宽字体用于时间显示 */
        @font-face {
            font-family: 'Roboto Mono';
            src: url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
        }

        body {
            background-color: rgba(0, 0, 0, 0.5); /* 背景遮罩效果 */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }

        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            background: var(--theme-background);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
        }

        /* 移动端底部弹出式设计 */
        @media (max-width: 767px) {
            body {
                align-items: flex-end;
                padding: 0;
            }

            .card-container {
                border-radius: 16px 16px 0 0;
                max-height: 60vh;
                overflow-y: auto;
            }

            .drag-indicator {
                width: 36px;
                height: 5px;
                background-color: #E0E0E0;
                border-radius: 2.5px;
                margin: 12px auto 8px;
                cursor: grab;
            }
        }

        /* 头部区域 */
        .card-header {
            padding: 24px 24px 16px;
            text-align: center;
        }

        .logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }

        .app-logo {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 8px;
        }

        .app-name {
            font-size: 20px;
            font-weight: 600;
            color: var(--theme-text);
        }

        /* 项目描述区域 */
        .project-desc {
            background-color: var(--theme-primary-light);
            border-radius: 8px;
            padding: 16px;
            margin: 0 24px 16px;
            text-align: center;
        }

        .project-desc-title {
            font-size: 18px;
            font-weight: 500;
            color: var(--theme-text);
            margin-bottom: 8px;
        }

        .project-desc-text {
            font-size: 16px;
            color: var(--theme-secondaryText);
            line-height: 1.4;
        }

        /* 时间线和状态展示 */
        .time-section {
            padding: 0 24px 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--theme-border);
        }

        /* 现代化时间线设计 */
        .timeline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 40px; /* 增加底部空间以适应标签 */
            position: relative;
            padding: 0 12px;
            margin-top: 30px; /* 增加顶部空间以适应标签 */
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 30px;
            right: 30px;
            height: 2px;
            background: linear-gradient(to right, var(--theme-border) 50%, var(--theme-primary) 50%);
            z-index: 1;
        }

        .timeline-point {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--theme-border);
            position: relative;
            z-index: 2;
            flex-shrink: 0;
        }

        .timeline-point.active {
            background-color: var(--theme-primary);
            box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.2);
            animation: pulse 1.5s infinite;
        }

        .timeline-point.completed {
            background-color: var(--theme-success);
        }

        .timeline-label {
            font-size: 14px;
            color: var(--theme-secondaryText);
            white-space: nowrap;
            position: absolute;
            width: 100%;
            text-align: center;
            top: -25px; /* 移到点的上方 */
            left: 0;
        }

        .timeline-date {
            font-size: 12px;
            color: var(--theme-secondaryText);
            position: absolute;
            width: auto; /* 改为自动宽度 */
            text-align: center;
            top: 20px; /* 移到点的下方 */
            left: 50%;
            transform: translateX(-50%); /* 水平居中 */
            white-space: nowrap; /* 防止日期换行 */
            display: inline-block; /* 添加为内联块元素 */
        }

        /* 开始时间和状态显示 */
        .time-display {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            margin-top: 8px; /* 与前面元素增加间距 */
        }

        .start-time {
            font-size: 16px;
            color: #757575;
            display: flex;
            align-items: center;
        }

        .calendar-icon {
            margin-right: 8px; /* 增加右侧间距 */
            font-size: 14px;
            display: inline-flex;
        }

        .start-indicator {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #43A047;
            margin-left: 8px; /* 增加左侧间距 */
        }

        /* 状态标签升级 */
        .status-label {
            font-size: 14px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 16px; /* 胶囊型 */
            background: linear-gradient(135deg, var(--theme-success-light), var(--theme-success-light));
            color: var(--theme-success-dark);
            display: inline-flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            border: 1px solid transparent;
            animation: pulseBorder 1.5s infinite;
            z-index: 10; /* 确保状态标签在最上层 */
            margin: 0 auto; /* 水平居中 */
        }

        .status-indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--theme-success-dark);
            margin-right: 6px;
            animation: pulsePoint 1.5s infinite;
            flex-shrink: 0;  /* 防止图标被压缩 */
        }

        /* 倒计时设计 */
        .countdown-section {
            text-align: center;
            margin-bottom: 16px;
            margin-top: 24px; /* 增加与上方元素的间距 */
        }

        .countdown-label {
            font-size: 14px;
            color: var(--theme-secondaryText);
            margin-bottom: 12px; /* 增加底部间距 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .clock-icon {
            margin-right: 8px; /* 增加右侧间距 */
            display: inline-flex; /* 确保图标正确显示 */
        }

        .countdown-display {
            display: flex;
            justify-content: center;
            gap: 4px; /* 减少单元之间的间距 */
            font-family: 'Roboto Mono', monospace;
            align-items: center;
        }

        .countdown-unit {
            display: inline-flex;
            align-items: center; /* 水平对齐 */
            position: relative;
            min-width: auto;
        }

        .countdown-value {
            background-color: var(--theme-primary-light);
            color: var(--theme-primary-dark);
            font-size: 18px; /* 稍微减小字体 */
            font-weight: 700;
            padding: 6px 10px;
            border-radius: 4px;
            min-width: 40px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 36px; /* 减小高度 */
        }

        .countdown-value.warning {
            background-color: var(--theme-warning-light);
            color: var(--theme-warning-dark);
        }

        .countdown-value.urgent {
            background-color: var(--theme-error-light);
            color: var(--theme-error-dark);
            animation: breathe 2s infinite;
        }

        .countdown-separator {
            font-size: 18px; /* 减小字体 */
            font-weight: 700;
            color: var(--theme-secondaryText);
            margin: 0 2px; /* 调整间距 */
        }

        .countdown-unit-label {
            font-size: 12px;
            color: var(--theme-secondaryText);
            margin-left: 4px; /* 与数字之间的间距 */
            margin-right: 8px; /* 与下一个单位之间的间距 */
        }

        /* 用户交互区域 */
        .interaction-area {
            padding: 0 24px 24px;
        }

        /* 地址输入区域 */
        .input-container {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .address-input {
            width: 85%;
            height: 48px;
            border: 1px solid var(--theme-border);
            border-radius: 8px;
            padding: 0 16px;
            font-size: 16px;
            transition: border-color 0.2s;
            background-color: var(--theme-background);
            color: var(--theme-text);
        }

        .address-input:focus {
            border-color: var(--theme-primary);
            outline: none;
        }

        .address-input.disabled {
            background-color: var(--theme-primary-light);
            color: var(--theme-secondaryText);
            cursor: not-allowed;
        }

        /* Connect钱包按钮 */
        .connect-wallet-btn {
            width: 44px;
            height: 44px;
            background-color: var(--theme-primary);
            color: white;
            border: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
            align-self: center;
        }

        .connect-wallet-btn:hover {
            background-color: var(--theme-primary-dark);
            transform: scale(1.05);
        }

        .wallet-icon {
            width: 24px;
            height: 24px;
        }

        /* 查询按钮 */
        .query-btn {
            width: 100%;
            height: 48px;
            background-color: var(--theme-primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .query-btn:hover {
            background-color: var(--theme-primary-dark);
        }

        .query-btn.disabled {
            background-color: var(--theme-border);
            cursor: not-allowed;
        }

        /* 2. 查询中状态 */
        .loading-text {
            text-align: center;
            color: #757575;
            margin-top: 16px;
            font-size: 14px;
        }

        .loader {
            display: inline-block;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #ffffff;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 1.5s linear infinite;
            margin-right: 8px;
        }

        /* 3. 结果状态 - 有资格 */
        .result-area {
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 16px;
        }

        .result-area.success {
            background-color: var(--theme-success-light);
        }

        .result-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .result-icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .result-icon.success {
            color: var(--theme-success-dark);
        }

        .result-title {
            font-size: 18px;
            font-weight: 600;
        }

        .result-title.success {
            color: var(--theme-success-dark);
        }

        /* 礼物图标与特效 - 现在独立于金额容器 */
        .gift-icon-container {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .gift-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            color: #fff;
            font-size: 40px;
            background: radial-gradient(circle, var(--theme-success) 0%, var(--theme-success-light) 100%);
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(67, 160, 71, 0.8);
            border: 3px solid white;
            animation: float 3s ease-in-out infinite;
            z-index: 2;
            margin: 0 auto;
        }

        /* 浮动动画 */
        @keyframes float {
            0% {transform: translateY(0px);}
            50% {transform: translateY(-15px);}
            100% {transform: translateY(0px);}
        }

        .claim-amount-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            background-color: var(--theme-success-light);
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(67, 160, 71, 0.2);
            position: relative;
            overflow: hidden;
        }

        .claim-amount {
            font-size: 18px;
            font-weight: 700;
            color: var(--theme-text);
        }

        .claim-usd {
            font-size: 20px;
            color: var(--theme-primary);
            font-weight: 700;
            background-color: var(--theme-primary-light);
            padding: 6px 12px;
            border-radius: 20px;
            border: 2px solid var(--theme-primary);
            box-shadow: 0 4px 8px rgba(30, 136, 229, 0.3);
            animation: pulseBright 2s infinite;
        }
        
        /* 中央爆炸特效 */
        .center-explosion {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(67, 160, 71, 0.8) 0%, rgba(255, 215, 0, 0.4) 70%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 80px;
            animation: centerExplode 1.5s forwards;
            z-index: 1000;
            box-shadow: 0 0 60px rgba(67, 160, 71, 0.9);
            opacity: 0;
        }

        /* 中央爆炸粒子 */
        .center-explosion-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .center-particle {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #FFD700;
            border-radius: 50%;
            box-shadow: 0 0 10px gold;
        }

        .center-particle:nth-child(1) { animation: centerParticle1 1.5s forwards; }
        .center-particle:nth-child(2) { animation: centerParticle2 1.5s forwards; }
        .center-particle:nth-child(3) { animation: centerParticle3 1.5s forwards; }
        .center-particle:nth-child(4) { animation: centerParticle4 1.5s forwards; }
        .center-particle:nth-child(5) { animation: centerParticle5 1.5s forwards; }
        .center-particle:nth-child(6) { animation: centerParticle6 1.5s forwards; }
        .center-particle:nth-child(7) { animation: centerParticle7 1.5s forwards; }
        .center-particle:nth-child(8) { animation: centerParticle8 1.5s forwards; }

        /* 中央爆炸动画 */
        @keyframes centerExplode {
            0% {transform: translate(-50%, -50%) scale(0.1); opacity: 0;}
            20% {transform: translate(-50%, -50%) scale(1.2); opacity: 1;}
            80% {transform: translate(-50%, -50%) scale(0.9); opacity: 0.8;}
            100% {transform: translate(-50%, -50%) scale(1.5); opacity: 0;}
        }

        /* 中央粒子动画 */
        @keyframes centerParticle1 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 0%; left: 20%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle2 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 0%; left: 80%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle3 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 100%; left: 20%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle4 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 100%; left: 80%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle5 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 20%; left: 0%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle6 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 20%; left: 100%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle7 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 80%; left: 0%; transform: scale(0); opacity: 0;}
        }
        
        @keyframes centerParticle8 {
            0% {top: 50%; left: 50%; transform: scale(1); opacity: 0;}
            10% {opacity: 1;}
            100% {top: 80%; left: 100%; transform: scale(0); opacity: 0;}
        }

        /* 弹跳动画 */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-10px);}
            60% {transform: translateY(-5px);}
        }

        /* 各个粒子的爆炸动画 */
        @keyframes particleExplode1 {
            0% {transform: translate(0, 0) scale(0.5); opacity: 0;}
            20% {transform: translate(20px, -30px) scale(1); opacity: 1;}
            80% {transform: translate(40px, -60px) scale(0.5); opacity: 0.5;}
            100% {transform: translate(50px, -70px) scale(0.2); opacity: 0;}
        }

        @keyframes particleExplode2 {
            0% {transform: translate(0, 0) scale(0.5); opacity: 0;}
            20% {transform: translate(-30px, -20px) scale(1); opacity: 1;}
            80% {transform: translate(-60px, -40px) scale(0.5); opacity: 0.5;}
            100% {transform: translate(-70px, -50px) scale(0.2); opacity: 0;}
        }

        @keyframes particleExplode3 {
            0% {transform: translate(0, 0) scale(0.5); opacity: 0;}
            20% {transform: translate(20px, 30px) scale(1); opacity: 1;}
            80% {transform: translate(40px, 60px) scale(0.5); opacity: 0.5;}
            100% {transform: translate(50px, 70px) scale(0.2); opacity: 0;}
        }

        @keyframes particleExplode4 {
            0% {transform: translate(0, 0) scale(0.5); opacity: 0;}
            20% {transform: translate(-30px, 20px) scale(1); opacity: 1;}
            80% {transform: translate(-60px, 40px) scale(0.5); opacity: 0.5;}
            100% {transform: translate(-70px, 50px) scale(0.2); opacity: 0;}
        }

        @keyframes particleExplode5 {
            0% {transform: translate(0, 0) scale(0.5); opacity: 0;}
            20% {transform: translate(30px, 0px) scale(1); opacity: 1;}
            80% {transform: translate(60px, 0px) scale(0.5); opacity: 0.5;}
            100% {transform: translate(70px, 0px) scale(0.2); opacity: 0;}
        }

        @keyframes particleExplode6 {
            0% {transform: translate(0, 0) scale(0.5); opacity: 0;}
            20% {transform: translate(-30px, 0px) scale(1); opacity: 1;}
            80% {transform: translate(-60px, 0px) scale(0.5); opacity: 0.5;}
            100% {transform: translate(-70px, 0px) scale(0.2); opacity: 0;}
        }

        /* 明亮的脉冲效果 */
        @keyframes pulseBright {
            0% {box-shadow: 0 0 5px rgba(30, 136, 229, 0.5);}
            50% {box-shadow: 0 0 20px rgba(30, 136, 229, 0.8);}
            100% {box-shadow: 0 0 5px rgba(30, 136, 229, 0.5);}
        }

        /* 领取按钮 */
        .claim-btn {
            width: 100%;
            height: 48px;
            background-color: var(--theme-success);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .claim-btn:hover {
            background-color: var(--theme-success-dark);
            transform: scale(1.02);
        }

        /* 分享按钮 */
        .share-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            color: var(--theme-success);
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: none;
        }

        /* 主题切换按钮 */
        .theme-toggle {
            position: absolute;
            top: 16px;
            left: 16px;
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            color: var(--theme-secondaryText);
            z-index: 100;
        }

        /* 4. 结果状态 - 无资格 */
        .result-area.failure {
            background-color: var(--theme-error-light);
        }

        .result-icon.failure {
            color: var(--theme-error-dark);
        }

        .result-title.failure {
            color: var(--theme-error-dark);
        }

        .ineligible-text {
            font-size: 16px;
            margin-bottom: 12px;
        }

        .info-divider {
            border: none;
            border-top: 1px solid var(--theme-border);
            margin: 12px 0;
        }

        .info-text {
            font-size: 14px;
            color: var(--theme-secondaryText);
            margin-bottom: 16px;
        }

        .recheck-btn {
            background-color: var(--theme-border);
            color: var(--theme-text);
            width: auto;
            min-width: 150px;
            height: 40px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            transition: background-color 0.2s;
        }

        .recheck-btn:hover {
            background-color: var(--theme-secondaryText);
        }

        /* 移动端优化 */
        @media (max-width: 767px) {
            .address-input, 
            .query-btn,
            .claim-btn {
                height: 56px;
                font-size: 18px;
            }

            .input-container {
                align-items: center;
            }

            .connect-wallet-btn {
                width: 56px;
                height: 56px;
            }

            .recheck-btn {
                height: 48px;
                font-size: 16px;
                width: 100%;
            }

            /* 增强型加载动画 */
            .loader {
                width: 24px;
                height: 24px;
                border-width: 3px;
            }

            /* 移动端倒计时显示 */
            .countdown-display {
                flex-wrap: nowrap;
            }

            .countdown-unit {
                flex: 1;
                min-width: auto;
            }

            .countdown-value {
                font-size: 16px;
                padding: 6px 8px;
            }

            .countdown-unit-label {
                font-size: 10px;
            }

            /* 关闭按钮 */
            .close-btn {
                width: 100%;
                height: 56px;
                background-color: #F5F5F5;
                color: #757575;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                margin-top: 16px;
                cursor: pointer;
            }

            /* 移动端显示分享按钮 */
            .share-btn {
                display: block;
            }
        }

        /* 动画效果 */
        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(30, 136, 229, 0); }
            100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); }
        }

        @keyframes pulsePoint {
            0% { opacity: 1; }
            50% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        @keyframes pulseBorder {
            0% { border-color: rgba(67, 160, 71, 0.6); }
            50% { border-color: rgba(67, 160, 71, 0.2); }
            100% { border-color: rgba(67, 160, 71, 0.6); }
        }

        @keyframes breathe {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes countdownFlip {
            0% { transform: translateY(0); opacity: 1; }
            45% { transform: translateY(-100%); opacity: 0; }
            55% { transform: translateY(100%); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }

        .slide-up {
            animation: slideUp 0.35s ease-out forwards;
        }

        /* 数字滚动动画 */
        .flip {
            animation: countdownFlip 0.5s ease-out;
        }

        /* 切换状态的容器样式 */
        .state-container {
            display: none;
        }

        .state-container.active {
            display: block;
        }

        /* 深色模式支持 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: rgba(0, 0, 0, 0.7);
            }

            .card-container {
                background-color: #121212;
            }

            .app-name,
            .claim-amount,
            .project-desc-title {
                color: #FFFFFF;
            }

            .project-desc-text {
                color: #E0E0E0;
            }

            .project-desc {
                background-color: #1E1E1E;
            }

            .start-time,
            .loading-text,
            .claim-usd,
            .expiry-info,
            .info-text,
            .timeline-label,
            .countdown-label {
                color: #B0B0B0;
            }

            .address-input {
                background-color: #1E1E1E;
                border-color: #333333;
                color: #FFFFFF;
            }

            .address-input.disabled {
                background-color: #2A2A2A;
                color: #B0B0B0;
            }

            .countdown-value {
                background-color: #2A2A2A;
                color: #FFFFFF;
                box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            }

            .countdown-value.warning {
                background-color: rgba(255, 160, 0, 0.2);
                color: #FFC107;
                box-shadow: 0 0 8px rgba(255, 160, 0, 0.2);
            }

            .countdown-value.urgent {
                background-color: rgba(211, 47, 47, 0.2);
                color: #F44336;
                box-shadow: 0 0 8px rgba(211, 47, 47, 0.3);
            }

            .drag-indicator {
                background-color: #666666;
            }

            .info-divider {
                border-color: #333333;
            }

            .time-section {
                border-color: #333333;
            }

            .recheck-btn {
                background-color: #333333;
                color: #FFFFFF;
            }

            .recheck-btn:hover {
                background-color: #444444;
            }

            .result-area.success {
                background-color: rgba(46, 125, 50, 0.2);
            }

            .result-area.failure {
                background-color: rgba(198, 40, 40, 0.2);
            }

            .close-btn {
                background-color: #333333;
                color: #FFFFFF;
            }

            .timeline::before {
                background: linear-gradient(to right, #444444 50%, #1E88E5 50%);
            }

            .timeline-point {
                background-color: #444444;
            }

            .timeline-date {
                color: #757575;
            }

            .countdown-unit-label {
                color: #757575;
            }
        }
    </style>
</head>
<body>
    <div class="card-container slide-up">
        <!-- 移动端拖动指示器 -->
        <div class="drag-indicator"></div>

        <!-- 头部区域 -->
        <div class="card-header">
            <!-- 主题切换按钮 -->
            <button class="theme-toggle" id="theme-toggle">🌓</button>
            
            <div class="logo-container">
                <img src="" alt="App Logo" class="app-logo">
                <h1 class="app-name">Airdrop Checker</h1>
            </div>
        </div>

        <!-- 项目描述区域 -->
        <div class="project-desc">
            <div class="project-desc-text">XXX Project is airdropping a total of 1000k$ to eligible users</div>
        </div>

        <!-- 时间线和状态展示 -->
        <div class="time-section">
            <!-- 现代化时间线 -->
            <div class="timeline">
                <div class="timeline-point completed">
                    <div class="timeline-label">开始</div>
                    <div class="timeline-date">05-01</div>
                </div>
                <div class="timeline-point active">
                    <div class="timeline-label">当前</div>
                    <div class="timeline-date">05-09</div>
                </div>
                <div class="timeline-point">
                    <div class="timeline-label">结束</div>
                    <div class="timeline-date">05-30</div>
                </div>
            </div>

            <!-- 状态显示区域 -->
            <div class="time-display">
                <div class="status-label">
                    <span class="status-indicator"></span>
                    开放领取
                </div>
            </div>

            <!-- 倒计时区域 -->
            <div class="countdown-section">
                <div class="countdown-label">
                    <span class="clock-icon">🕒</span>
                    距离结束还有
                </div>
                <div class="countdown-display" id="countdown-display">
                    <div class="countdown-unit">
                        <div class="countdown-value" id="days-value">21</div>
                        <span class="countdown-unit-label">天</span>
                    </div>
                    <div class="countdown-separator">:</div>
                    <div class="countdown-unit">
                        <div class="countdown-value" id="hours-value">05</div>
                        <span class="countdown-unit-label">时</span>
                    </div>
                    <div class="countdown-separator">:</div>
                    <div class="countdown-unit">
                        <div class="countdown-value" id="minutes-value">42</div>
                        <span class="countdown-unit-label">分</span>
                    </div>
                    <div class="countdown-separator">:</div>
                    <div class="countdown-unit">
                        <div class="countdown-value" id="seconds-value">18</div>
                        <span class="countdown-unit-label">秒</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 交互区域 -->
        <div class="interaction-area">
            <!-- 1. 待查询状态 -->
            <div id="query-state" class="state-container active">
                <div class="input-container">
                    <input type="text" class="address-input" placeholder="输入ETH钱包地址(0x...)" id="address-input">
                    <button class="connect-wallet-btn" id="connect-wallet-btn">
                        <svg class="wallet-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19 7H5C3.89543 7 3 7.89543 3 9V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M3 10H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16 15C16.5523 15 17 14.5523 17 14C17 13.4477 16.5523 13 16 13C15.4477 13 15 13.4477 15 14C15 14.5523 15.4477 15 16 15Z" fill="white"/>
                        </svg>
                    </button>
                </div>
                <button class="query-btn" id="query-button">查询</button>
            </div>

            <!-- 2. 查询中状态 -->
            <div id="loading-state" class="state-container">
                <div class="input-container">
                    <input type="text" class="address-input disabled" placeholder="0x7a16ff8270133f063aab39c8e0317b1e9bac6a2e" disabled>
                </div>
                <button class="query-btn disabled">
                    <span class="loader"></span>查询中...
                </button>
                <div class="loading-text">正在检查您的资格，请稍候...</div>
            </div>

            <!-- 3. 查询结果状态: 有资格 -->
            <div id="success-state" class="state-container">
                <div class="result-area success">
                    <button class="share-btn" title="分享结果">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12 15.0057 5.23873 15.0169 5.35559L8.67195 9.06353C8.24993 8.42172 7.57834 8 6.8 8C5.47452 8 4.4 9.07452 4.4 10.4C4.4 11.7255 5.47452 12.8 6.8 12.8C7.58695 12.8 8.26533 12.3657 8.68397 11.7114L14.9329 15.3614C14.9113 15.5043 14.9 15.6506 14.9 15.8C14.9 17.3464 16.1536 18.6 17.7 18.6C19.2464 18.6 20.5 17.3464 20.5 15.8C20.5 14.2536 19.2464 13 17.7 13C16.7539 13 15.9291 13.4354 15.423 14.1118L9.1741 10.4686C9.22318 10.1804 9.25 9.88695 9.25 9.6C9.25 9.36667 9.23039 9.13855 9.19229 8.9169L15.5562 5.18895C16.0024 5.66495 16.6242 5.95 17.3 5.95C18.6255 5.95 19.7 4.87548 19.7 3.55C19.7 2.22452 18.6255 1.15 17.3 1.15C15.9745 1.15 14.9 2.22452 14.9 3.55C14.9 3.67 14.9057 3.78873 14.9169 3.90559L8.57195 7.61353C8.14993 6.97172 7.47834 6.55 6.7 6.55C5.37452 6.55 4.3 7.62452 4.3 8.95C4.3 10.2755 5.37452 11.35 6.7 11.35C7.48695 11.35 8.16533 10.9157 8.58397 10.2614L14.8329 13.9114C14.8113 14.0543 14.8 14.2006 14.8 14.35C14.8 15.8964 16.0536 17.15 17.6 17.15C19.1464 17.15 20.4 15.8964 20.4 14.35C20.4 12.8036 19.1464 11.55 17.6 11.55C16.6539 11.55 15.8291 11.9854 15.323 12.6618L9.0741 9.01857C9.12318 8.73035 9.15 8.43695 9.15 8.15C9.15 7.91667 9.13039 7.68855 9.09229 7.4669L15.4562 3.73895C15.9024 4.21495 16.5242 4.5 17.2 4.5" stroke="#43A047" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <div class="result-header">
                        <div class="result-icon success">✓</div>
                        <div class="result-title success">恭喜！您有资格获得空投</div>
                    </div>
                    
                    <!-- 中央爆炸特效 (只在页面加载时显示一次) -->
                    <div class="center-explosion" id="centerExplosion">
                        🎊
                        <div class="center-explosion-particles">
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                            <div class="center-particle"></div>
                        </div>
                    </div>
                    
                    <!-- 礼物图标单独放置在中间 -->
                    <!-- <div class="gift-icon-container">
                        <div class="gift-icon">🎁</div>
                    </div> -->
                    
                    <div class="claim-amount-container">
                        <div class="claim-amount">Available: 123.11 $Token</div>
                        <div class="claim-usd">≈$1.23 USD</div>
                    </div>
                    <button class="claim-btn">领取空投</button>
                </div>
            </div>

            <!-- 4. 查询结果状态: 无资格 -->
            <div id="failure-state" class="state-container">
                <div class="result-area failure">
                    <div class="result-header">
                        <div class="result-icon failure">✗</div>
                        <div class="result-title failure">很抱歉，该地址未获得空投资格</div>
                    </div>
                    <div class="ineligible-text">This address is not eligible for the airdrop</div>
                    <hr class="info-divider">
                    <div class="info-text">您可以尝试其他地址或检查地址是否正确</div>
                </div>
                <button class="recheck-btn">重新检查</button>
            </div>

            <!-- 关闭按钮已移除 -->
        </div>
    </div>

    <script>
        // 全局配置项（模拟window全局变量）
        const APP_NAME = "Airdrop Checker";
        const APP_LOGO = "";
        const ClaimCoin_static = "123.11";
        const ClaimPrice_static = 0.01;
        const isMobile = window.innerWidth <= 767;
        const PROJECT_DESC = "XXX Project is airdropping a total of 1000k$ to eligible users";
        
        // 结束时间（用于倒计时）
        const endDate = new Date('2025-05-30T23:59:59');

        // DOM元素
        const appNameEl = document.querySelector('.app-name');
        const appLogoEl = document.querySelector('.app-logo');
        const projectDescEl = document.querySelector('.project-desc-text');
        const queryStateEl = document.getElementById('query-state');
        const loadingStateEl = document.getElementById('loading-state');
        const successStateEl = document.getElementById('success-state');
        const failureStateEl = document.getElementById('failure-state');
        const queryButton = document.getElementById('query-button');
        const addressInput = document.getElementById('address-input');
        const connectWalletBtn = document.getElementById('connect-wallet-btn');
        const recheckButton = document.querySelector('.recheck-btn');
        const claimButton = document.querySelector('.claim-btn');
        const closeButton = document.getElementById('close-btn');

        // 倒计时元素
        const daysValueEl = document.getElementById('days-value');
        const hoursValueEl = document.getElementById('hours-value');
        const minutesValueEl = document.getElementById('minutes-value');
        const secondsValueEl = document.getElementById('seconds-value');

        // 设置全局配置
        appNameEl.textContent = APP_NAME;
        appLogoEl.src = APP_LOGO;
        projectDescEl.textContent = PROJECT_DESC;

        // 主题切换功能
        const themeToggleBtn = document.getElementById('theme-toggle');
        
        themeToggleBtn.addEventListener('click', () => {
            document.body.classList.toggle('theme-dark');
            const isDark = document.body.classList.contains('theme-dark');
            themeToggleBtn.textContent = isDark ? '☀️' : '🌓';
            
            // 保存用户主题偏好到本地存储
            localStorage.setItem('theme-preference', isDark ? 'dark' : 'light');
        });
        
        // 检查用户之前的主题偏好
        const savedTheme = localStorage.getItem('theme-preference');
        if (savedTheme === 'dark' || (savedTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.body.classList.add('theme-dark');
            themeToggleBtn.textContent = '☀️';
        }

        // 状态切换函数
        function showState(stateId) {
            // 隐藏所有状态
            queryStateEl.classList.remove('active');
            loadingStateEl.classList.remove('active');
            successStateEl.classList.remove('active');
            failureStateEl.classList.remove('active');
            
            // 显示指定状态
            document.getElementById(stateId).classList.add('active');
        }

        // 更新倒计时
        function updateCountdown() {
            const now = new Date();
            const diff = Math.max(0, endDate - now);
            
            // 计算天、时、分、秒
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            // 更新显示
            if (daysValueEl.textContent !== String(days).padStart(2, '0')) {
                daysValueEl.classList.add('flip');
                setTimeout(() => daysValueEl.classList.remove('flip'), 500);
            }
            
            if (hoursValueEl.textContent !== String(hours).padStart(2, '0')) {
                hoursValueEl.classList.add('flip');
                setTimeout(() => hoursValueEl.classList.remove('flip'), 500);
            }
            
            if (minutesValueEl.textContent !== String(minutes).padStart(2, '0')) {
                minutesValueEl.classList.add('flip');
                setTimeout(() => minutesValueEl.classList.remove('flip'), 500);
            }
            
            secondsValueEl.classList.add('flip');
            setTimeout(() => secondsValueEl.classList.remove('flip'), 500);
            
            daysValueEl.textContent = String(days).padStart(2, '0');
            hoursValueEl.textContent = String(hours).padStart(2, '0');
            minutesValueEl.textContent = String(minutes).padStart(2, '0');
            secondsValueEl.textContent = String(seconds).padStart(2, '0');
            
            // 根据剩余时间调整样式
            if (diff <= 60 * 60 * 1000) { // 少于1小时
                daysValueEl.classList.remove('warning');
                hoursValueEl.classList.remove('warning');
                minutesValueEl.classList.remove('warning');
                secondsValueEl.classList.remove('warning');
                
                daysValueEl.classList.add('urgent');
                hoursValueEl.classList.add('urgent');
                minutesValueEl.classList.add('urgent');
                secondsValueEl.classList.add('urgent');
            } else if (diff <= 24 * 60 * 60 * 1000) { // 少于24小时
                daysValueEl.classList.remove('urgent');
                hoursValueEl.classList.remove('urgent');
                minutesValueEl.classList.remove('urgent');
                secondsValueEl.classList.remove('urgent');
                
                daysValueEl.classList.add('warning');
                hoursValueEl.classList.add('warning');
                minutesValueEl.classList.add('warning');
                secondsValueEl.classList.add('warning');
            }
        }

        // 初始化并启动倒计时
        updateCountdown();
        const countdownInterval = setInterval(updateCountdown, 1000);

        // 模拟查询功能
        function simulateQuery(address) {
            showState('loading-state');
            
            // 模拟API请求延迟
            setTimeout(() => {
                // 随机决定查询结果（为了演示）
                const isEligible = Math.random() > 0.5;
                
                // 根据结果显示相应状态
                if (isEligible) {
                    showState('success-state');
                } else {
                    showState('failure-state');
                }
            }, 2000);
        }

        // 连接钱包功能
        async function connectWallet() {
            try {
                // 模拟连接钱包
                connectWalletBtn.innerHTML = '<span class="loader"></span>';
                
                // 模拟延迟
                setTimeout(() => {
                    const mockAddress = '0x' + Array(40).fill(0).map(() => 
                        Math.floor(Math.random() * 16).toString(16)).join('');
                    
                    if (typeof window.addressCallback === 'function') {
                        window.addressCallback(mockAddress);
                    } else {
                        addressInput.value = mockAddress;
                    }
                    
                    // 恢复按钮状态
                    connectWalletBtn.innerHTML = `
                        <svg class="wallet-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19 7H5C3.89543 7 3 7.89543 3 9V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M3 10H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16 15C16.5523 15 17 14.5523 17 14C17 13.4477 16.5523 13 16 13C15.4477 13 15 13.4477 15 14C15 14.5523 15.4477 15 16 15Z" fill="white"/>
                        </svg>
                    `;
                }, 1500);
            } catch (error) {
                console.error("钱包连接失败", error);
                alert("连接钱包失败，请稍后重试");
                
                // 恢复按钮状态
                connectWalletBtn.innerHTML = `
                    <svg class="wallet-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 7H5C3.89543 7 3 7.89543 3 9V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3 10H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 15C16.5523 15 17 14.5523 17 14C17 13.4477 16.5523 13 16 13C15.4477 13 15 13.4477 15 14C15 14.5523 15.4477 15 16 15Z" fill="white"/>
                    </svg>
                `;
            }
        }

        // 事件监听器
        queryButton.addEventListener('click', () => {
            const address = addressInput.value.trim();
            if (address && address.startsWith('0x')) {
                simulateQuery(address);
            } else {
                alert('请输入有效的ETH钱包地址');
            }
        });

        // 连接钱包按钮
        connectWalletBtn.addEventListener('click', connectWallet);

        // 重新检查按钮
        recheckButton.addEventListener('click', () => {
            showState('query-state');
            addressInput.value = '';
            addressInput.focus();
        });

        // 领取按钮
        claimButton.addEventListener('click', () => {
            claimButton.disabled = true;
            claimButton.textContent = "领取中...";
            
            setTimeout(() => {
                claimButton.textContent = "已领取";
                claimButton.style.backgroundColor = "#9E9E9E";
                alert('领取成功！');
                
                // 在实际应用中实现window.onClaimButtonClick回调
                if (typeof window.onClaimButtonClick === 'function') {
                    window.onClaimButtonClick(addressInput.value, {
                        amount: ClaimCoin_static,
                        price: ClaimPrice_static
                    });
                }
            }, 1500);
        });

        // 拖动指示器功能（移动端）
        if (isMobile) {
            const dragIndicator = document.querySelector('.drag-indicator');
            const cardContainer = document.querySelector('.card-container');
            let startY = 0;
            let currentY = 0;
            
            dragIndicator.addEventListener('touchstart', (e) => {
                startY = e.touches[0].clientY;
                dragIndicator.style.cursor = 'grabbing';
                e.preventDefault();
            });
            
            dragIndicator.addEventListener('touchmove', (e) => {
                currentY = e.touches[0].clientY - startY;
                
                // 只允许向下拖动
                if (currentY > 0) {
                    cardContainer.style.transform = `translateY(${currentY}px)`;
                }
                
                e.preventDefault();
            });
            
            dragIndicator.addEventListener('touchend', () => {
                dragIndicator.style.cursor = 'grab';
                
                // 如果拖动距离超过卡片高度的25%，则关闭
                if (currentY > cardContainer.offsetHeight * 0.25) {
                    cardContainer.style.transform = 'translateY(100%)';
                    cardContainer.style.opacity = '0';
                    
                    setTimeout(() => {
                        alert('插件已关闭');
                        cardContainer.style.transform = 'translateY(0)';
                        cardContainer.style.opacity = '1';
                        // 重置状态
                        showState('query-state');
                        addressInput.value = '';
                    }, 350);
                } else {
                    // 否则回到原位
                    cardContainer.style.transform = 'translateY(0)';
                }
            });
        }

        // 外部回调示例
        window.addressCallback = function(address) {
            addressInput.value = address;
            addressInput.disabled = true;
            addressInput.classList.add('disabled');
            simulateQuery(address);
        };

        // 分享按钮功能
        document.querySelector('.share-btn').addEventListener('click', () => {
            // 在实际应用中实现分享功能
            alert('分享功能将在实际应用中实现');
        });

        // 中央爆炸特效
        window.addEventListener('load', function() {
            // 延迟显示中央爆炸特效，在成功状态显示后触发
            setTimeout(() => {
                const centerExplosion = document.getElementById('centerExplosion');
                centerExplosion.style.opacity = '1';
                
                // 爆炸特效结束后隐藏
                setTimeout(() => {
                    centerExplosion.style.display = 'none';
                }, 1500);
            }, 500);
        });

        // Demo: 显示不同状态 (可以通过控制台调用下面的函数查看不同状态)
        window.showQueryState = () => showState('query-state');
        window.showLoadingState = () => showState('loading-state');
        window.showSuccessState = () => showState('success-state');
        window.showFailureState = () => showState('failure-state');

        // 消息提示：仅用于演示
        console.log("演示提示: 您可以通过浏览器控制台调用以下函数切换不同状态：");
        console.log("window.showQueryState() - 显示待查询状态");
        console.log("window.showLoadingState() - 显示查询中状态");
        console.log("window.showSuccessState() - 显示查询成功状态");
        console.log("window.showFailureState() - 显示查询失败状态");
        console.log("window.addressCallback('0x...') - 模拟外部调用地址回调");
    </script>
</body>
</html>
